import React from 'react';
import { Card, Typography, Switch, Upload, Button, message, Space } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import MainLayout from '../../components/MainLayout';
import { toggleMenu } from '../../store/slices/menuSlice';
import { RootState } from '../../store';
import styles from './index.module.css';

const { Title, Text } = Typography;

const menuItems = [
  { key: 'home', label: '首页' },
  { key: 'chat', label: '产业问答' },
  { key: 'trend', label: '趋势分析' },
  { key: 'report', label: '智能报告' },
  { key: 'knowledge', label: '知识库管理' },
  { key: 'tech-insight', label: '技术洞察' }
];

const PageManage: React.FC = () => {
  const dispatch = useDispatch();
  const visibleMenus = useSelector((state: RootState) => state.menu.visibleMenus);
  const [licenseFile, setLicenseFile] = React.useState<File | null>(null);

  const handleFeatureToggle = (key: string, checked: boolean) => {
    dispatch(toggleMenu({ key, visible: checked }));
    message.success(`已${checked ? '启用' : '禁用'}${menuItems.find(item => item.key === key)?.label}`);
  };

  const handleLicenseUpload = (info: any) => {
    if (info.file.status === 'done') {
      setLicenseFile(info.file.originFileObj);
      message.success('许可证文件上传成功');
    } else if (info.file.status === 'error') {
      message.error('许可证文件上传失败');
    }
  };

  return (
    <MainLayout>
      <div className={styles.container}>
        <Space direction="vertical" size="large" style={{ width: '100%' }}>
          <Card>
            <Title level={3}>产品信息</Title>
            <div className={styles.info}>
              <Text>产品名称：产业创新生态系统</Text>
              <Text>版本号：V1.0.0</Text>
              <Text type="success">激活状态：已激活</Text>
            </div>
          </Card>

          <Card>
            <Title level={3}>功能管理</Title>
            <div className={styles.features}>
              {menuItems.map(feature => (
                <div key={feature.key} className={styles.featureItem}>
                  <Text>{feature.label}</Text>
                  <Switch
                    checked={visibleMenus[feature.key]}
                    onChange={(checked) => handleFeatureToggle(feature.key, checked)}
                  />
                </div>
              ))}
            </div>
          </Card>

          <Card>
            <Title level={3}>产品激活</Title>
            <div className={styles.upload}>
              <Upload
                onChange={handleLicenseUpload}
                accept=".lic,.key"
                maxCount={1}
                action="/api/upload-license"
                showUploadList={false}
              >
                <Button icon={<UploadOutlined />}>上传License文件</Button>
              </Upload>
              {licenseFile && (
                <Text type="secondary" className={styles.fileName}>
                  当前文件：{licenseFile.name}
                </Text>
              )}
            </div>
          </Card>
        </Space>
      </div>
    </MainLayout>
  );
};

export default PageManage;
